<template>
  <div class="ds-digital-flop2-front">
    <template v-for="(i, index) in numbers" :key="numbers.length - index">
      <div v-if="isStrNaN(i)" class="separator">{{ i }}</div>
      <FlopNum v-else :num="i" />
    </template>
    <div v-if="suffix" class="suffix">{{ suffix }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch, computed } from "vue";
import FlopNum from "./flop-num.vue";

/**
 *
 * @param num 数字
 * @param decimals 保留小数位
 * @param decimal 小数点符号
 * @param separator 千分位分隔符
 * @returns
 */
const formatNumber = (
  num: number | string,
  decimals: number = 0,
  decimal: string = ".",
  separator: string = ","
) => {
  const n = Number(num).toFixed(decimals) + "";
  const x = n.split(".");
  let x1 = x[0];
  const x2 = x.length > 1 ? decimal + x[1] : "";
  const rgx = /(\d+)(\d{3})/;
  if (separator && Number.isNaN(Number(separator))) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, "$1" + separator + "$2");
    }
  }
  return x1 + x2;
};

export interface IBaseModels {
  width: number;
  height: number;
}

export interface IWidgetModels extends IBaseModels {
  x: number;
  y: number;
  [index: string]: any;
}

const _props = {
  models: {
    type: Object as PropType<IWidgetModels>,
    required: false,
    default: () => ({}),
  },
  widgetData: {
    type: Array as PropType<{ value: string }[]>,
    required: true,
    default: () => [],
  },
};

export default defineComponent({
  name: "DsDigitalFlop2Front",
  components: { FlopNum },
  props: _props,
  setup(props) {
    const numbers = ref<(string | number)[]>([]);
    const suffix = computed(() => props.models.suffix);

    const transformNumber = (num: string, decimals: number) => {
      const formated = formatNumber(num, decimals);
      if (Number.isNaN(formated)) {
        return [];
      } else {
        return String(formated)
          .split("")
          .map((i) => (Number.isNaN(parseInt(i)) ? i : parseInt(i)));
      }
    };
    const isStrNaN = (num: string) => {
      return Number.isNaN(Number(num));
    };

    watch(
      [() => props.widgetData, () => props.models.decimals],
      ([val, decimals]) => {
        if (
          Array.isArray(val) &&
          val[0] &&
          typeof val[0].value !== "undefined"
        ) {
          numbers.value = transformNumber(val[0].value, decimals);
        }
      },
      {
        immediate: true,
      }
    );

    return {
      numbers,
      isStrNaN,
      suffix,
    };
  },
});
</script>

<style lang="less">
.ds-digital-flop2-front {
  display: inline-flex;
  justify-content: flex-end;
  column-gap: 10px;
  .separator {
    width: 12px;
    height: 100px;
    background-image: linear-gradient(180deg, #eeeeee 0%, #94e8ff 100%);
    font-family: DIN Alternate;
    font-weight: 700;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 50px;
    line-height: 136px;
  }

  .suffix {
    display: flex;
    align-items: flex-end;
    height: 100px;
    margin-left: -10px;
    margin-right: 10px;
    background-image: linear-gradient(180deg, #eeeeee 0%, #94e8ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    font-family: PingFang SC;
    font-weight: 600;
    color: #bce2ff;
    font-size: 34px;
    line-height: 49px;
  }
}
</style>
